<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>firststone</title>
    <style type="text/css">
        html 
        {
            margin: 0 auto;
            height: 100%;
        }
    </style>
</head>

<body>
    <script src="./js/three.js"></script>
    <script src="./js/stats.min.js"></script>
    <script src="./js/dat.gui.min.js"></script>
    <script src="./js/GLTFLoader.js"></script>
    <script src="./js/DRACOLoader.js"></script>
    <script type="module">
        import { OrbitControls } from './js/OrbitControls.js';
        import { MeshoptDecoder } from './js/meshopt_decoder.module.js';
        
        //相机
        var camera;
        function initCamera() 
        {
            camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
            camera.position.set(120, 20, 120);
            camera.lookAt(new THREE.Vector3(0,0,0));
        }
    
        //渲染
        var renderer;
        function initRender() 
        {
            renderer = new THREE.WebGLRenderer({antialias:true, powerPreference: "high-performance"});
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true
            renderer.shadowMap.type = THREE.PCFSoftShadowMap
            renderer.setClearColor(0xffffff);
            document.body.appendChild(renderer.domElement);
        }
    
        //场景
        var scene;
        function initScene() 
        {
            scene = new THREE.Scene();
        }
    
        //灯光
        var light;
        function initLight() 
        {
            scene.add(new THREE.AmbientLight(0xffffff));
            light = new THREE.PointLight(0xffffff,0.5);
            light.position.set(100,100,100);
            light.castShadow = true;
            scene.add(light);
        }

        //创建LOD
        var lod = new THREE.LOD();
    
        //导入模型1
        function initModel1() 
        {
            var loader = new THREE.GLTFLoader();
            var dracoLoader = new THREE.DRACOLoader();
            dracoLoader.setDecoderPath('./js/draco/');
            dracoLoader.preload();
            loader.setDRACOLoader(dracoLoader);
            loader.load('./1/sparse1.glb' , function ( gltf ) {
                gltf.scene.position.set(0,-15,0);
                gltf.scene.scale.set(30,30,30);
                lod.addLevel(gltf.scene, 200);
                //scene.add( gltf.scene );
            })
        }
    
        //导入模型2
        function initModel2() 
        {
            var loader = new THREE.GLTFLoader();
            var dracoLoader = new THREE.DRACOLoader();
            dracoLoader.setDecoderPath('./js/draco/');
            dracoLoader.preload();
            loader.setDRACOLoader(dracoLoader);
            loader.load('./1/sparse2.glb' , function ( gltf ) {
                gltf.scene.position.set(0, -35,0);
                gltf.scene.scale.set(30,30,30);
                lod.addLevel(gltf.scene, 170);
                //scene.add( gltf.scene );
            })
        }
    
        //导入模型3
        function initModel3() 
        {   
            var loader = new THREE.GLTFLoader();
            loader.setMeshoptDecoder(MeshoptDecoder);
            loader.load('./1/sparse3.glb' , function ( glb ) {
                glb.scene.position.set(0, -35,0);
                glb.scene.scale.set(30,30,30);
                lod.addLevel(glb.scene, 130);
                //scene.add( glb.scene );
            })
        }
    
        //导入模型4
        function initModel4() 
        {   
            var loader = new THREE.GLTFLoader();
            loader.setMeshoptDecoder(MeshoptDecoder);
            loader.load('./1/sparse4.glb' , function ( glb ) {
                glb.scene.position.set(0, -15, 0);
                glb.scene.scale.set(30,30,30);
                lod.addLevel(glb.scene, 90);
                //scene.add( glb.scene );
            })
        }
    
        //gui调试器
        var gui;
        function initGui()
        {
            gui = new dat.GUI({width:400});
            gui.add(controls, 'autoRotate');
            
        }
    
        //初始化性能插件
        var stats;
        function initStats() 
        {
            stats = new Stats();
            document.body.appendChild(stats.dom);
        }
    
        //交互插件 
        var controls;
        function initControls() 
        {
            controls = new OrbitControls(camera, renderer.domElement);
            controls.autoRotate = true;
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = true;
            controls.minDistance  = 40;
            controls.maxDistance  = 300;
        }
    
        function render() 
        {
            scene.add(lod);
            var vector = camera.position.clone();
            light.position.set(vector.x,vector.y,vector.z); 
            renderer.render(scene, camera);
        }
    
        //窗口变动触发的函数，窗口发生变动时，让弹出的窗体自动居中
        function onWindowResize() 
        {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            render();
            renderer.setSize(window.innerWidth, window.innerHeight);
    
        }
    
        function animate() 
        {
            render();
            lod.update(camera);
            //stats.update();
            controls.update();
            requestAnimationFrame(animate);
        }
        
        initCamera();
        initRender();
        initScene();
        initLight();
        initModel1();
        initModel2();
        initModel3();
        initModel4();
        initControls();
        //initStats();
        //initGui();
        animate();
        window.onresize = onWindowResize;
    </script>
</body>
</html>